<template>
  <div class="flex direction-column">
    <div class="search-form">
      <el-form :model="qs" inline>
        <el-form-item label="企业">
          <el-select v-model="qs.enterprise"></el-select>
        </el-form-item>
        <el-form-item label="年份">
          <el-date-picker type="year" v-model="qs.year"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="height-100 chart-block">
      <bar-chart class="bar-chart" title="综合能源消费量" :info="info1"></bar-chart>
      <bar-chart class="bar-chart" title="能源消费构成" :info="info2"></bar-chart>
      <bar-chart class="bar-chart" title="煤炭消费量" :info="info3" yaxis-name="吨"></bar-chart>
      <pie-chart class="pie-chart" title="月度煤炭消费占比" :info="info4"></pie-chart>
      <pie-chart class="pie-chart" title="月度电力消费占比" :info="info5"></pie-chart>
      <pie-chart class="pie-chart" title="年度能源消费构成" :info="info6"></pie-chart>
      <pie-chart class="pie-chart" title="能源消费构成占比" :info="info7"></pie-chart>
    </div>
  </div>
</template>

<script>
import BarChart from '@/views/enterprise-energy-consumption-analysis/bar-chart'
import PieChart from '@/views/enterprise-energy-consumption-analysis/pie-chart'
import { createObject } from '@/views/enterprise-energy-consumption-analysis/bar-chart/data'
import getArrayData from '@/views/enterprise-energy-consumption-analysis/pie-chart/data'

export default {
  name: 'enterprise-energy-consumption-analysis',
  components: {
    BarChart,
    PieChart
  },
  data () {
    return {
      qs: {
        enterprise: '',
        year: ''
      },
      info1: createObject(['2020年', '2021年', '2022年', '2023年']),
      info2: createObject(['电力', '煤炭', '热力', '油品', '气体']),
      info3: createObject(['2022年', '2023年']),
      info4: getArrayData([
        '1月', '2月', '3月', '4月', '5月', '6月',
        '7月', '8月', '9月', '10月', '11月', '12月'
      ]),
      info5: getArrayData([
        '1月', '2月', '3月', '4月', '5月', '6月',
        '7月', '8月', '9月', '10月', '11月', '12月'
      ]),
      info6: getArrayData(['电力', '煤炭', '热力', '油品', '气体']),
      info7: getArrayData(['电力', '煤炭', '热力', '油品', '气体']),
    }
  },
  methods: {
    onSearch () {
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .chart-block {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: $gutter;

    ::v-deep .chart-item {
      border-radius: 4px;
      box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.02);
    }
  }
  .bar-chart {
    grid-column-start: 1;
    grid-column-end: 5;
  }
</style>
